<template>
  <view class="home-page">
    <view class="home">
      <swiper
        :init-page="0"
        :auto-play="3000"
        :circular="true"
        pagination-visible
        pagination-color="#426543"
        pagination-unselected-color="#808080"
        class="swiper-container"
      >
        <swiper-item
          v-for="(item, index) in pics"
          :key="index"
          class="swiper-item"
        >
          <image
            :src="item"
            mode="aspectFill"
            class="swiper-image"
            lazy-load
            show-menu-by-longpress
          />
        </swiper-item>
      </swiper>

      <myInput v-model="searchTxt" @search="handleSearch" />

      <!-- 顶部进度条 -->
      <view class="progress-bar">
        <view
          class="progress-item"
          v-for="(item, index) in progressList"
          :key="index"
          @tap="handleFeatureClick(item)"
        >
          <image
            :src="item.imgUrl || pic"
            class="img1"
            mode="aspectFill"
          ></image>

          <view class="title1">{{ item.name }}</view>
        </view>
      </view>

      <!-- <view class="s-title">
        <text>爆款精品</text>
      </view> -->

      <image :src="bar" mode="scaleToFill" class="bars" />

      <view class="case-more">
        <view
          class="case-box"
          v-for="(item, index) in caseList"
          :key="index"
          @tap="goDetail(item)"
        >
          <image class="case-img" :src="item.image" mode="aspectFill"></image>
          <!-- <text class="acct">{{ item.account_type }}券</text> -->
          <view class="p-title">{{ item.name }}</view>
          <view class="p-price">￥{{ item.price }}</view>
          <view class="p-num">销量：{{ 241212 }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, ref } from "vue";
import bar from "@/assets/imgs/bar.png";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import Taro from "@tarojs/taro";
import { Search2 } from "@nutui/icons-vue-taro";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
const searchTxt = ref("");

const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

Taro.setNavigationBarTitle({
  title: "首页",
});

const pics = ref([]);

const upper = (e) => {
  console.log("upper:", e);
};

const lower = (e) => {
  console.log("lower:", e);
};

const onMoreView = () => {
  Taro.navigateTo({
    url: "/pages/test/test",
  });
};

Taro.usePullDownRefresh(() => {
  flash();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});

function flash() {
  http.post(`/api/mallIndex/banner`).then((res) => {
    console.log("res 轮播图", res);
    pics.value = res.data.map((i) => i.columns.imgUrl);
  });

  http.post(`/api/mallIndex/goodsType`).then((res) => {
    console.log("res 商品类型", res);
    progressList.value = res.data.map((i) => i.columns);
  });

  http.post(`/api/mallIndex/recommend`).then((res) => {
    console.log("res 推荐的商品", res);
    caseList.value = res.data.map((i) => i.columns);
    caseList.value.forEach((item) => {
      item.image = item.imgsUrl.split(",").pop();
    });
  });
}

onMounted(() => {
  flash();
});

// 进度条数据
const progressList = ref([
  { name: "质量保证", imgUrl: pic, id: 1 },
  { name: "现场评估", imgUrl: pic, id: 2 },
  { name: "明码标价", imgUrl: pic, id: 3 },
  { name: "售后保障", imgUrl: pic, id: 4 },
]);

// 案例展示数据
const caseList = ref([]);

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
  Taro.navigateTo({
    url: `/pages-detail/cate/list-view?id=${item.id}`,
  });
};

const handleSearch = (value: string | number) => {
  console.log("搜索值：", value);
  // 执行搜索逻辑
  Taro.navigateTo({
    url: `/pages-detail/shop/search?keyword=${value}`,
  });
};

const goDetail = (item) => {
  Taro.navigateTo({
    url: "/pages-detail/detail/index?id=" + item.id,
  });
};

const onTest = () => {
  Taro.navigateTo({
    url: "/pages-detail/addr/index",
  });
};
</script>

<style lang="scss">
.home-page {
  padding-bottom: 40rpx;
  background: #f0f0f0;
  .acct {
    font-size: 24rpx;
    background: #008000;
    color: #fff;
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
  }
  .home {
    width: 100vw;
    margin: auto;
    height: 100%;
  }
  .ico {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
  }
  .tops {
    width: 100%;
    height: 300rpx;
  }

  .img1 {
    width: 80rpx;
    height: 80rpx;
  }

  .img2 {
    width: 120rpx;
    height: 120rpx;
  }

  .progress-bar {
    width: 720;

    background-color: #fff;
    border-radius: 16rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 一行5个商品 */
    padding: 20rpx; /* 商品间距 */
    box-sizing: border-box;
    margin: 20rpx auto;

    .progress-item {
      flex-shrink: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      // flex: 1;
      position: relative;

      .img1 {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .title1 {
        font-size: 24rpx;
        color: #333;
        padding: 8rpx;
        text-align: center;
      }
    }
  }

  .feature-section {
    background-color: #fff;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 32rpx;

    .section-title {
      margin-bottom: 32rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32rpx;

      .feature-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32rpx;
        background-color: #f8f8f8;
        border-radius: 16rpx;

        text {
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  .bars {
    display: flex;
    width: 720rpx;
    height: 100rpx;
    margin: 20rpx auto;
  }
  .case-more {
    display: grid;
    width: 720rpx;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto 30rpx;

    .case-box {
      background: #fff;
      display: flex;
      flex-direction: column;
      width: 350rpx;
      border-radius: 8rpx;
      position: relative;
      .case-img {
        width: 350rpx;
        height: 400rpx;
        border-radius: 8rpx;
        background: #eee;
      }

      .p-title {
        font-size: 30rpx;
        color: #333;
        margin-top: 4rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 8rpx 16rpx 2rpx;
      }

      .p-price {
        font-size: 30rpx;
        color: #ffaa00;
        margin-top: 4rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        // padding: 4rpx;
        padding: 8rpx 16rpx;
      }
      .p-num {
        font-size: 24rpx;
        color: #8e8e8e;
        margin-top: 4rpx;
        padding: 2rpx 16rpx 10rpx;
      }
    }
  }
  .case-section {
    background-color: #fff;
    padding: 32rpx;
    border-radius: 16rpx;

    .section-title {
      margin-bottom: 32rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .case-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32rpx;

      .case-item {
        image {
          width: 100%;
          height: 240rpx;
          border-radius: 16rpx;
          margin-bottom: 16rpx;
        }

        text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  .s-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 0;
    text {
      font-size: 30rpx;
      color: #333;
    }
  }

  .swp {
    width: 100%;
    height: 300rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
  }

  .swiper-container {
    width: 100%;
    height: 300rpx; /* 统一使用 rpx 单位 */
    border-radius: 16rpx;
    overflow: hidden;

    .swiper-item {
      width: 100%;
      height: 100%;

      .swiper-image {
        width: 100%;
        height: 100%;
        display: block;
        will-change: transform; /* 提升动画性能 */
      }
    }

    /* 修复分页器位置 */
    .nut-swiper-pagination {
      bottom: 20rpx !important;

      .nut-swiper-pagination-item {
        width: 16rpx;
        height: 16rpx;
        margin: 0 8rpx;
      }
    }
  }
}
</style>
